<template>
  <div class="section-wrap">
    <!-- 头部 -->
    <div class="headerBox">
    <div class="header" >
      <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>问题项验收
    </div>
    </div>>
    <div class="form-section" style="margin-bottom: 0;padding-top: 40px;">
        <p style="color:#469b7a;font-weight:bold;font-size:16px;padding-left:20px;height:60px;line-height: 60px;border-bottom:1px solid #efeff4;">整改前</p>
        <div class="form-item form-item-style1" style="height: auto;padding: 10px 10px 10px 0px;">
          <div class="label-title" style="line-height: normal;">
            <label>问题描述</label>
          </div>
          <div style="width:260px;text-align:right;padding:0;line-height:normal;">{{list.questionDescribr}}</div>
         <!-- <textarea style="width:260px;" v-model="list.questionDescribr" disabled></textarea> -->
        </div>
        <div class="form-item form-item-style1" style="height: auto;padding: 10px 10px 10px 0px;">
          <div class="label-title" style="line-height: normal;">
            <label>整改要求</label>
          </div>
          <div style="max-width:260px;padding:0;line-height:normal;">{{list.rectificationCs}}</div>
          <!-- <textarea style="width:260px;text-align:right;padding:0;" v-model="list.rectificationCs" disabled></textarea> -->
        </div>
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label>整改期限</label>
          </div>
          <div class="input_div" v-if="list.rectificationDate">
            {{list.rectificationDate.substring(0, 10)}}
          </div>
        </div>
      <div class="form-item form-item-style1" style="height: auto;display: flex;flex-direction: column;align-items: start">
        <div class="label-title">
          <label>整改前图片</label>
        </div>
        <div>
          <img
            style="width:60px;height:60px;margin:10px;"
            v-if='list.projectImgList.length > 0 '  v-for="item2 in list.projectImgList"
            :key="item2.id"   :src="item2.url" @click="previewImg(item2.url)" alt="">
        </div>
      </div>
      <template v-if="list.rectifyList.length > 0" v-for="(item,index) in list.rectifyList" >
        <div style="border-top: 10px solid #efeff4;" v-if="item.rectifystatus == 1 ">
          <p style="color:#469b7a;font-weight:bold;font-size:16px;padding-left:20px;height:60px;line-height: 60px;border-bottom:1px solid #efeff4;">整改(第{{index+1}}次)</p>
          <div class="form-item form-item-style1" style="height:auto;padding: 10px 10px 10px 0;">
            <div class="label-title" >
              <label style="width:100px;">整改完成情况</label>
            </div>
            <div class="input_div ovr" style="line-height: 20px;height:auto;">
              <!-- {{item.rectificationCom}} -->
              <textarea style="padding:0;text-align: right;height: 25px;" v-model="item.rectificationCom" readonly></textarea>
            </div>
          </div>
          <div class="form-item form-item-style1" style="height: auto;display: flex;flex-direction: column;align-items: start">
            <div class="label-title">
              <label style="min-width:90px;">整改后图片</label>
            </div>
             <div style="height:100%;">
               <img
                 style="width:60px;height:60px;margin:10px;"
                 v-if='item.photoList.length > 0 '  v-for="item2 in item.photoList"
                    :key="item2.id"   :src="item2.url" @click="previewImg(item2.url)" alt="">
             </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>整改人</label>
            </div>
            <div class="input_div">
              {{item.rectificationPer}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>整改时间</label>
            </div>
            <div class="input_div" v-if="item.rectificationDate">
              {{item.rectificationDate.substring(0, 10)}}
            </div>
          </div>
        </div>
        <div style="border-top: 10px solid #efeff4;" v-if="item.checkstatus == 1 ">
          <p style="color:#469b7a;font-weight:bold;font-size:16px;padding-left:20px;height:60px;line-height: 60px;border-bottom:1px solid #efeff4;">验收(第{{index+1}}次)</p>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>验收时间</label>
            </div>
            <div class="input_div" v-if="item.checkDate">
              {{item.checkDate.substring(0, 10)}}
            </div>
          </div>
          <div class="form-item form-item-style1" >
            <div class="label-title" >
              <label>验收人</label>
            </div>
            {{item.checkPro}}
          </div>

          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>验收结论</label>
            </div>
            <div class="input_div " >
              {{item.checkVerdict}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="input_div ovr" style="line-height: 20px">
              <label>验收意见</label>
            </div>
            <div class="input_div ovr" style="line-height: 20px;">
              <!-- {{item.checkRemark}} -->
              <textarea style="padding:0;text-align: right;height: 25px;" v-model="item.checkRemark" readonly></textarea>
            </div>
          </div>
        </div>
     <div style="border-top: 10px solid #efeff4;" v-if="list.status ==1 && item.checkstatus == 0  && $route.query.index == 1">
          <p style="color:#469b7a;font-weight:bold;font-size:16px;padding-left:20px;height:60px;line-height: 60px;border-bottom:1px solid #efeff4;">验收(第{{index+1}}次)</p>
       <div class="form-item form-item-style1">
         <div class="label-title" style="width:130px;">
           <label>验收结论</label>
         </div>
         <div class="input_div" >
            <el-radio v-model="radio1" label="合格">合格</el-radio>
            <el-radio v-model="radio1" label="不合格">不合格</el-radio>
         </div>
       </div>

       <div class="form-item form-item-style1">
         <div class="label-title" style="width:130px;">
           <label>验收意见</label>
         </div>
         <div class="input_div" @click="classValue=true">
           <input type="text" v-model="rectifydateRemark" disabled placeholder="请选择">
         </div>
       </div>

       <div class="form-item form-item-style1" >
         <div class="label-title" >
           <label>验收人</label>
         </div>
         {{item.checkPro}}
       </div>

       <div class="form-item form-item-style1">
         <div class="label-title">
           <label>验收时间</label>
         </div>
         <group style="margin-right:-20px">
           <datetime v-model="end"></datetime>
         </group>
       </div>
       <div class="formSumbit">
         <p @click="submit">提交</p>
       </div>
        </div>
      </template>
    </div>
    <div v-transfer-dom>
      <popup v-model="classValue" width="100%" height="300px">
        <group>
          <x-textarea :max="200" name="description" placeholder="请输入" v-model="checkArea" id="tt"></x-textarea>
        </group>
        <p class="transfer_p"><span @click="ent">确定</span> <em @click="clear">清空</em></p>
      </popup>
    </div>
    <el-dialog :visible.sync="flag"  fullscreen center>
      <img :src="selectImg" alt="" width="100%">
    </el-dialog>
  </div>
</template>
<script>
  import upload from "@/commonComponents/upload/upload";
  import formatDate from "../../utils/formatDate";
  import { XHeader,Tabbar, TabbarItem, Group, Cell ,TransferDom,Popup,XTextarea} from 'vux'
  import LoadMore from "vux/src/components/load-more/index";
  export default {
    directives:{
      TransferDom
    },
    data() {
      return {
        list:{},
        classValue:false,
        rectifydateRemark:'',
        checkArea:'',
        imgList:[],
        selectImg:'',
        flag: false,
        YSFormData: "",
        YSuploadLength: "",
        end:'',
        radio1:'合格'
      };
    },
    components: {
      Popup,
      XTextarea,
      upload
    },
    created() {
      this.$store.state.illegalType =''
      var myDate = new Date(); //实例一个时间对象；
      myDate.getFullYear();   //获取系统的年；
      myDate.getMonth()+1;   //获取系统月份，由于月份是从0开始计算，所以要加1
      var m =myDate.getMonth()+1<10?'0'+(myDate.getMonth()+1):myDate.getMonth()+1
      myDate.getDate(); // 获取系统日，
      myDate.getHours(); //获取系统时，
      myDate.getMinutes(); //分
      var min =myDate.getMinutes()<10?'0'+myDate.getMinutes():myDate.getMinutes()
      this.end=myDate.getFullYear()+'-'+m+'-'+myDate.getDate()
      this.getInfo()

    },
    methods: {
      previewImg(url){//图片预览
        this.selectImg=url
        this.flag=true
      },
      setYSFormData (formData, uploadLength, fileName) {
        this.YSFormData = formData;
        this.YSuploadLength = uploadLength;
      },
      ent(){
        this.rectifydateRemark=this.checkArea
        this.classValue=false
      },
      clear(){
        this.checkArea=''
      },
      getInfo() {
        let id = this.$route.query.id;
        this.$axiosAjax
          .rectificationPro({ rectificationId: id })
          .then(res => {
            if (res.data.success == true) {
              console.log(res.data.result)
              this.list = res.data.result
              this.$store.state.illegalDepartId =res.data.result.id
            }
          })
          .catch(err => {});
      },
      submit(){
        // var param1 = {}
        for (var k of this.list.rectifyList){
          if (k.checkstatus ==0 ){
            k.checkVerdict = this.radio1
            k.checkRemark=this.rectifydateRemark
            k.checkDate=this.end+' 00:00:00'
          }
        }
        if(this.radio1=='不合格' && this.rectifydateRemark=='' ){
          this.$message.warning('验收意见不能为空')
        }else{
          this.list.status=2

        this.$axiosAjax
          .rectificationProSave(this.list)
          .then(res => {
            if (res.data.success == true) {
                  this.$message.success('提交成功！')
              this.$router.go(-1);
            }
          })
          .catch(err => {});
        }
      },
      goBack() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style>
  .section-wrap .upload-wrap>div>div:nth-child(5n+5){
    margin-right: 20px;
  }
</style>
<style lang="less" scoped>
  .ovr{
    width:190px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    text-align: left;
    float:left;
  }
  .formSumbit{
    padding:20px 50px;
    display: flex;
    justify-content: space-around;
    p{
      width:160px;
      line-height: 30px;
      text-align: center;
      border-radius: 40px;
      background: #469b7a;
      color:#fff;
    }
    p:hover{
      cursor: pointer;
      opacity: .8;
    }
  }
  .form-item {
    .input_div {
      .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 17px;
      }
    }
  }
  .transfer_p{
    padding: 10px 20px;
    height: 30px;
    span,em{
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      border-radius: 5px;
      color: #fff;
    }
    span{
      float: left;
      background-color:#2abf72;
    }
    em{
      float: right;
      background-color: #ceaa6c;
    }
  }
</style>
